/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2016-12-04 11:17:36
 * @version $Id$
 */
.banner {
  width: 100%;
  height: 780px;
  position: relative;
  background: url("joinus.png") no-repeat;
  background-position: top center;
  display: table; }
  .banner h3{
    line-height: 86px;
    padding-top: 100px;
    text-align: center;
    color: #ffffff;
    font-size: 45px;
    display:table-cell;
    vertical-align: middle;
    -webkit-animation:fadeIn 2s 0.5s ease both;
       -moz-animation:fadeIn 2s 0.5s ease both;
        -ms-animation:fadeIn 2s 0.5s ease both;
         -o-animation:fadeIn 2s 0.5s ease both;
            animation:fadeIn 2s 0.5s ease both;
  }

.welfare {
  padding: 100px 0 56px;
  border-bottom: 1px solid #e5e5e5; }
  .welfare ul {
    font-size: 0; }
  .welfare li {
    width: 25%;
    display: inline-block;
    opacity: 0; }
    .welfare li.fain {
      -webkit-animation:fadeIn 1.8s 0.4s ease both;
         -moz-animation:fadeIn 1.8s 0.4s ease both;
          -ms-animation:fadeIn 1.8s 0.4s ease both;
           -o-animation:fadeIn 1.8s 0.4s ease both;
              animation:fadeIn 1.8s 0.4s ease both; }
    .welfare li img {
      width: 106px;
      height: 106px;
      margin: 0 auto; }
    .welfare li span {
      display: block;
      margin: 18px auto;
      color: #a7a7a7;
      font-size: 14px;
      text-align: center; }

.post {
  padding: 56px 0 100px;  opacity: 0; }
  .post.in{-webkit-animation:fadeIn 1s 0.4s ease both;
         -moz-animation:fadeIn 1s 0.4s ease both;
          -ms-animation:fadeIn 1s 0.4s ease both;
           -o-animation:fadeIn 1s 0.4s ease both;
              animation:fadeIn 1s 0.4s ease both; }
  .post ul {
    font-size: 0; }
    .post ul li {
      width: 25%;
      display: inline-block;
      text-align: center;
      vertical-align: top; }
      .post ul li h3 {
        font-size: 18px;
        text-align: center;
        color: #585858;
        margin-bottom: 16px; }
      .post ul li a {
        display: block;
        height: 24px;
        line-height: 24px;
        color: #b8b8b8;
        font-size: 14px; }
        .post ul li a:hover {
          color: #585858; }
  .post .morepost {
    padding-top: 40px; }
    .post .morepost #morebtn {
      width: 134px;
      height: 58px;
      line-height: 58px;
      display: block;
      margin: 0 auto;
      text-align: center;
      border: 1px solid #e5e5e5;
      font-size: 14px;
      color: #333333;
      border-radius: 30px; }
      .post .morepost #morebtn:hover {
        background: #ffd900; }
    .post .morepost p {
      padding-top: 40px;
      font-size: 14px;
      color: #929292;
      text-align: center; }
      .post .morepost p a {
        color: #929292; }

.post-warp {
  width: 100%;
  height: 100%;
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6); }
  .post-warp .post-con {
    width: 684px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    margin-top: -250px;
    margin-left: -342px;
    background: #fff; }
  .post-warp #close {
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    background: url();
    z-index: 10; }
  .post-warp .post-w {
    height: 380px;
    padding: 60px;
    overflow-y: scroll;
    display: none; }
    .post-warp .post-w h3 {
      padding-bottom: 38px;
      font-weight: 500;
      font-size: 24px;
      color: #333333;
      border-bottom: 1px solid #e5e5e5; }
    .post-warp .post-w h4 {
      margin: 40px 0 12px;
      font-weight: 500;
      color: #414141;
      font-size: 14px; }
    .post-warp .post-w p {
      padding-bottom: 8px;
      line-height: 24px;
      font-size: 14px;
      color: #999999; }

.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
  right: 18px;
  margin: 60px 0; }